<template>
  <div>
    <el-form @submit.native.prevent class="query-table-form" :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="客户名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          v-model="params.approval_status"
          placeholder="项目状态"
          @change="getData()"
          :options="enumApproveStatus"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button @click="handleFlow">
          <i class="fa fa-sitemap"></i>
          审批流程
        </el-button>
      </el-form-item>
    </el-form>

    <c-table
      border
      v-loading="loading"
      ref="table"
      class="table-sm"
      :columns="tableColumns"
      row-key="customer_related_id"
      :data="tableData"
    ></c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        :page-sizes="[15, 100, 200, 500, 1000]"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <flow-dialog
      title="内部审批流程"
      :visible.sync="flowVisible"
      flow-key="BANK_APPROVAL"
    ></flow-dialog>

    <project-approval-dialog
      :visible.sync="approvalVisible"
      :query-id="approvalId"
    ></project-approval-dialog>
    <project-view-dialog :visible.sync="viewVisible" :query-id="viewId"></project-view-dialog>
  </div>
</template>

<script>
import FlowDialog from '@/credit/components/flow/ViewDialog'
import { enumApproveStatus } from '@/bank/views/business/hplimit/enum'
import ProjectApprovalDialog from '@/bank/views/business/hplimit/approve/components/MainDialog'
import { mapGetters } from 'vuex'
import ProjectViewDialog from '@/bank/views/business/hplimit/ProjectViewDialog'
export default {
  components: {
    FlowDialog,
    ProjectApprovalDialog,
    ProjectViewDialog,
  },
  props: {},
  data() {
    return {
      enumApproveStatus,
      flowVisible: false,
      queryDate: [],
      params: {
        index: 1,
        size: 10,
        'is_rural_dev.eq': 2,
        'channel_type.eq': 1,
      },
      tableCount: 0,
      loading: false,
      tableData: [],
      tableColumns: [
        { attrs: { label: '序号', prop: 'index', width: 80, align: 'center' } },
        {
          attrs: { label: '客户名称', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },

        {
          attrs: { label: '授信金额(万元)', prop: 'reply_funds', align: 'center', width: 120 },
        },
        {
          attrs: { label: '贷款金额(万元)', prop: 'warranty_amount', align: 'center', width: 120 },
        },
        {
          attrs: { label: '创建时间', prop: 'createTime', align: 'center', minWidth: '90px' },
        },

        { attrs: { label: '项目状态', prop: 'approveStatus', align: 'center' } },

        {
          attrs: { label: '操作', align: 'center', width: '120px', fixed: 'right' },
          operations: [
            {
              content: '审批',
              icon: 'fa fa-gavel',
              event: this.handlerApprove,
            },

            { content: '查看', icon: 'fa fa-search', event: this.showInfo },
          ],
        },
      ],

      approvalId: '',
      approvalVisible: false,

      viewVisible: false,
      viewId: '',
    }
  },
  computed: {
    ...mapGetters(['userId']),
  },
  watch: {},
  created() {
    this.params.task_person = this.userId
    this.getData()
  },
  mounted() {},
  methods: {
    showInfo(row) {
      this.viewId = row.customer_related_id || ''
      this.viewVisible = true
    },
    handlerApprove(row = {}) {
      this.approvalId = row.customer_related_id
      this.approvalVisible = true
    },

    handleSizeChange(val) {
      this.params.size = val
      this.getData()
    },
    dataAdapter(item, index) {
      const submitData = item?.project_apply_batch?.[0] ?? {}
      item.submitOrg = submitData.submit_client_name || '未申报'
      item.createTime = this.$utils.dateFormat(item.create_time, 'yyyy-MM-dd')
      item.loadDate = this.$utils.dateFormat(item.load_date, 'yyyy-MM-dd')
      item.loadEndDate = this.$utils.dateFormat(item.load_end_date, 'yyyy-MM-dd')
      item.loadDateCredit = this.$utils.dateFormat(item.load_date_credit, 'yyyy-MM-dd')
      item.loadEndDateCredit = this.$utils.dateFormat(item.load_end_date_credit, 'yyyy-MM-dd')
      item.approveStatus = '审批中'

      item.resName = `A角: ${item.res_a_name} B角: ${item.res_b_name}`
      item.index = this.params.size * (this.params.index - 1) + index + 1
      return item
    },

    getData() {
      this.loading = true
      this.$api
        .getData('credit', 'datum_one_county_industry_view_task', this.params)
        .then(res => {
          const data = res.data || {}
          this.tableCount = data.totalCount || 0
          this.tableData = (data.data || []).map(this.dataAdapter)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleFlow() {
      this.flowVisible = true
    },
  },
}
</script>

<style lang="scss" scoped>
.status-label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
</style>
